<template>
  <div style="margin-top:30px">
    <el-form ref="form"  label-width="80px"  :model="form" :rules="rules">
      <el-row >
        <el-col :span="24">
          <div class="grid-content bg-purple" style="margin-left:-5%">
            
            <el-form-item  
              style="margin-right:20%"  
              v-for="(item,index) in arr" 
              :key="index" 
              >
              <p style="font-weight:bolder ">{{item[2] + '单价'}}</p>
              <el-input v-model="form.price[index]" placeholder="请输入单价" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="funcCancel">取 消</el-button>
      <el-button type="primary" @click="funcSubmit">确 定</el-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import request from '@/utils/request'
import 'vxe-table/lib/index.css'
import { validatenumber } from "@/utils/validate.js";

Vue.use(VXETable)
export default {
  name: 'JobItemAdd',
  components: {
  },

  data() {
    return {
      arr:[],
      optionType: '',
      emptyForm: {},
      cascadeData:[],
      form: {
        price:[]
      },
      rules: {
        price: [
          { required: true, message: '请输入单价', trigger: 'blur' },
        ],
      }
    }
  },
  
  created() {
    // 保存空表单对象
    this.emptyForm = JSON.parse(JSON.stringify(this.form))
    this.getCascadeData()
  },
  methods: {
    // 获取字典数据
    getCascadeData() {
      request({
        url: '/arpa-basic-api/costType/cascadeData',
        method: 'get'
      }).then(response => {
        this.cascadeData = response.data
      })
    },
    // 翻译
    formatterType(cellValue) {
      let arr = []
      this.cascadeData.forEach( item => {
        item.children.forEach( i => {
          if(i.value === cellValue){
            arr.push(i.label)
          }
        })
      })
      return arr
    },

    // 获取页面信息
    getInfo(i) {
      this.form.price = []
      this.arr = []
      this.arr = i
      this.arr.forEach( i => {
        i.push(this.formatterType(i[1])[0])
      })


      // request({ url: `/ntocc-wms-api/damage/${code}`, method: 'get' }).then(response => {
      //   this.form = response.data
      // })
    },
    // 提交
    funcSubmit() {
      this.form.price.length = this.arr.length
      let arrs = []
      let num = ''
      this.form.price.forEach( i => {
        if(i){
          arrs.push(i)
          if(arrs.length < this.arr.length){
            // this.$message.error('请输入全部单价')
            num = 1
          }else{
            num = 2
          }
        }else{
          num = 1
        }
      })
      // if(num = 1){
      //   this.$message.error('请输入全部单价')
      // }else{
      //   this.submit()

      // }
      switch (num) {
        case 1:
          this.$message.error('请输入全部单价')
          break
        case 2:
          this.$emit('fatherAddMethod', this.form.price)
          break
        default:
      }
      // this.$refs['form'].validate((valid) => {
      //   if (valid) {
      //     console.log(valid)
      //   }else{
      //     console.log(222)
      //   }
      // })

          // this.$emit('fatherAddMethod', this.form.price)
      // console.log(this.form.price)
      // this.form.price.forEach( i => {
      //   if(i){
      //     this.submit()
      //   }else{
      //     console.log(1111)
      //   }
      // })
    },
    // submit(){
      
    // },
    // 取消
    funcCancel() {
      this.$emit('fatherCancelMethod', 'add')
    },
  }
}
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 175px;
    float: right;
  }
</style>
